<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

</html>
<script>
    //一.Es6新增promise(承诺)
    //Promise可以解决回调地狱的问题。
    //Promise异步编程的一种解决方案，比传统的解决方案（回调函数）更合理和更强大。

    //二.Promise对象有以下两个特点
    // 1.Promise对象代表一个异步操作，有三种状态：
    // pending进行中
    // fulfilled - resolve已成功 已解决
    // rejected- 已失败 未解决

    // 2.一旦状态设定，就不会再变，任何时候都可以得到这个结果。 

    // Promise对象的状态改变，只有两种可能： 
    // 从pending变为fulfilled和从pending变为rejected。 只要这两种情况发生，状态就凝固了.
    // promise状态1：
    // pending -- > resolve 进行中-- > 成功
    // pending -- > reject  进行中-- > 失败

    // 三.代码演示
    // 1.利用Promise类创建promise实例对象。
    // let promise = new Promise((resolve, reject) => {
    //     //回调做参数，可以通过回调设置状态。回调函数里面又有两个参数resolve,reject,这两个参数都是函数
    //     //这里的代码都是同步的。
    //     let arr = ['zhangsan', 'lisi', 'wangwu'];
    //     resolve(arr); //将promise的状态设定为成功。(一旦状态设定，就不会再变),resolve括号里面的参数传递给then.
    //     // reject(); //将promise的状态设定为失败。reject括号里面的参数传递给catch.
    // });

    // 2.promise实例下面有三个原型方法(实例方法) - 异步的,这三个方法也是函数做参数。
    // then:如果状态设置成功，执行then里面的代码
    // catch:如果状态设置失败，执行catch里面的代码 
    // finally:无论成功或失败，执行finally里面的代码，可选的，很少使用。
    // promise.then((data) => {
    //     console.log('我是成功的回调');
    //     console.log(data);
    // }).catch(() => {
    //     console.log('我是失败的回调');
    // })

    // 四.promise异步问题
    console.log(1);
    let promise = new Promise((resolve, reject) => {
        console.log(2);
        resolve();
    });
    promise.then(() => {
        console.log(3);
    });
    console.log(4);
    1, 2, 4, 3


    // 五.promise带数据
    let promise = new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open('get', 'http://localhost/JS2104/Day18_ajax/data/taobao.php', true);
        xhr.send();
        xhr.onload = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                resolve(xhr.responseText)
            }
        }
    });

    //promise下面的三个方法只能给promise实例对象使用。
    promise
        .then((data) => {
            console.log(data);
        })
        .then((data) => { //前面的then依然会返回promise实例对象，then照常执行，data没有值的，resolve的值传给第一个then。
            console.log(data);
            console.log('我还是then里面的代码');
        })
        .catch(() => {

        });
</script>